import React, {Fragment} from 'react'
import PropTypes from 'prop-types'
import {Badge, Table, Button} from 'antd'
import {toBadge, toText} from 'services/order'
import classnames from 'classnames'
import {DropOption} from 'components'
import {Link} from 'react-router-dom'
import AnimTableBody from 'components/DataTable/AnimTableBody'
import styles from './List.less'
import {getOrderLink, updateOrder} from 'utils/tabs'

const List = ({
                dispatch, isMotion, ...tableProps
              }) => {

  const handleMenuClick = (record) => {
      updateOrder(record, dispatch)
  }

  const columns = [
    {
      title: '订单编号',
      dataIndex: 'sn',
      key: 'sn',
      width: 150,
      fixed: 'left',
      render: (sn, record) => getOrderLink(record, dispatch),
    }, {
      title: '订单总金额',
      dataIndex: 'totalAmount',
      key: 'totalAmount',
      render: (val) => val + '元',
      width: 150,
    }, {
      title: '实际金额',
      dataIndex: 'realityPayAmount',
      key: 'realityPayAmount',
      render: (val) => val + '元',
      width: 150,
    }, {
      title: '代收金额',
      dataIndex: 'unreceivedAmount',
      key: 'unreceivedAmount',
      render: (val) => val + '元',
      width: 150,
    }, {
      title: '复购订单',
      dataIndex: 'isBuyBack',
      key: 'reorder',
      width: 100,
      render: val => val ? '是' : '否',
    }, {
      title: '订单状态',
      dataIndex: 'status',
      key: 'status',
      width: 120,
      render: (val) => <Badge status={toBadge(val)} text={toText(val)}/>,
    }, {
      title: '产品信息',
      dataIndex: 'goodsInfo',
      key: 'goodsInfo',
    }, {
      title: '预付方式',
      dataIndex: 'prepayTypeName',
      key: 'prepayTypeName',
      width: 180,
    }, {
      title: '预付金额',
      dataIndex: 'preAmount',
      key: 'preAmount',
      width: 120,
      render: (val) => val + '元',
    }, {
      title: '下单员工所属部门',
      dataIndex: 'belongDeptName',
      key: 'belongDeptName',
      width: 120,
    }, {
      title: '下单员工',
      dataIndex: 'emp',
      key: 'emp_username',
      width: 100,
      render: emp => emp ? emp.username : "-",
    }, {
      title: '下单时间',
      dataIndex: 'ctime',
      key: 'ctime',
    }, {
      title: '要求发货时间',
      dataIndex: 'requireSendTime',
      key: 'requireSendTime',
    }, {
      title: '发货时间',
      dataIndex: 'sendTime',
      key: 'sendTime',
    }, {
      title: '订单类型',
      dataIndex: 'type',
      key: 'type',
      width: 100,
      render: val => val === 0 ? '即时订单' : '后续订单',
    }, {
      title: '收货人',
      dataIndex: 'address',
      key: 'address.receiver',
      width: 150,
      render: address => address ? address.receiver : "-",
    }, {
      title: '收货电话',
      dataIndex: 'address.dmobile',
      key: 'address.dmobile',
      render: val => val ? val : "-",
    }, {
      title: '收货地址',
      dataIndex: 'addressInfo',
      key: 'address.address',
      render: address => address ? address : "-",
    }, {
      title: '归属微号',
      dataIndex: 'wxId',
      key: 'wxId',
      width: 150,
    }, {
      title: '好友微号',
      dataIndex: 'dcustomerWxId',
      key: 'dcustomerWxId',
      width: 100,
    }, {
      title: '获客渠道',
      dataIndex: 'customerSourceName',
      key: 'customerSourceName',
      width: 100,
    }, {
      title: '签收日期',
      dataIndex: 'signTime',
      key: 'signTime',
      width: 100,
    }, {
      title: '发货仓库',
      dataIndex: 'depotName',
      key: 'depotName',
      width: 100,
    }, {
      title: '操作',
      key: 'operation',
      width: 100,
      fixed: 'right',
      render: (val, record) => <Fragment>
        <Button type="primary" disabled={record.status >= 4} onClick={() => handleMenuClick(record)}>
          <Link to={'/orderForm/' + record.id}>编辑</Link>
        </Button>
      </Fragment>
    },
  ]

  const AnimateBody = (props) => {
    return <AnimTableBody {...props} />
  }

  const CommonBody = (props) => {
    return <tbody {...props} />
  }

  return (
    <Table
      {...tableProps}
      className={classnames(styles.table)}
      scroll={{x: 3500}}
      columns={columns}
      simple
      rowKey={record => record.id}
      components={{
        body: {wrapper: isMotion ? AnimateBody : CommonBody},
      }}
    />
  )
}

List.propTypes = {
  onDeleteItem: PropTypes.func,
  onEditItem: PropTypes.func,
  location: PropTypes.object,
}

export default List
